<template>
  <div class="serchBox">
    <checkBox @checkClick="handleCheck" :checkList="checkList" :checkAllBox="true">
      <span>数据模型</span>
    </checkBox>
    <div>
      <el-input
        v-model="searchInput"
        type="input"
        placeholder="请输入要查找的服务名称"
        size="mini"
      ></el-input>
    </div>
    <el-button type="primary">查找</el-button>
  </div>

  <ProTable
    :tableData="tableData"
    :colConfigs="columns"
    showNo="true"
    pagination="true"
    :pageable="pageable"
    :loading="loading"
    showCheckout="true"
  >
    <template #tag="{ row }">
      <div class="tag" :class="row.status == '启用' ? 'home' : 'office'">{{ row.status }}</div>
    </template>
    <template #operation="{ row }">
      <div>
        <el-button type="primary" :icon="Edit" circle @click="handleEdit(row)" />
        <el-button type="danger" :icon="Delete" circle />
      </div>
    </template>
  </ProTable>

  <div @click="handlePagination" ref="pagination">
    <Pagination :total="total" @handlePaginationChange="handlePaginationChange" />
  </div>
</template>

<script setup>
import { ref, onMounted, reactive, computed, nextTick } from 'vue'
import stateData from '../index.js'
import { getList, updateItem } from '@/api/user'
import { Delete, Edit } from '@element-plus/icons-vue'
const tableData = ref()
const searchInput = ref('')
const pagination = ref()
const columns = ref([
  {
    prop: 'name',
    label: '服务名称'
  },
  {
    prop: 'content',
    label: '发布日期',
    width: '200px'
  },
  {
    prop: 'sex',
    label: '数据对象'
  },
  {
    prop: 'age',
    label: '数据范围'
  },
  {
    prop: 'phone',
    label: '浏览量',
    width: '100px'
  },
  {
    prop: 'date',
    label: '数据格式',
    width: '120px'
  },

  {
    prop: 'address',
    label: '详细信息'
  },
  {
    prop: 'status',
    label: '状态',
    type: 'slot',
    slot_name: 'tag'
  },
  {
    label: '预览',
    type: 'slot',
    align: 'center',
    slot_name: 'operation'
  }
])
const checkList = ref(['矢量', '栅格', '地形', '影像', '文本', '三维模型', '其他'])
// const props = defineProps({
//   state: {
//     type: Object,
//     default: () => {}
//   }
// })
const emit = defineEmits(['changeComponent'])

const total = ref(0)
// 调用API获取表格数据
const getListData = () => {
  let params = {
    pageIndex: pageIndex.value,
    pageSize: pageSize.value
  }
  getList(params).then(res => {
    // 解构赋值
    let { records, total: count } = res.data
    tableData.value = records
    total.value = count
    loading.value = false
    console.log(res)
  })
}
const pageSize = ref(10) // 单页容量
const pageIndex = ref(1) // 当前页码
let pageable = computed(() => {
  return {
    pageSize: pageSize.value,
    pageCurrent: pageIndex.value
  }
})
const loading = ref(false)
const handlePaginationChange = item => {
  pageIndex.value = item.currentPage
  pageSize.value = item.pageSize
  loading.value = true
  console.log(item)
  getListData()
}
onMounted(() => {
  getListData()
})
const handleCheck = val => {
  console.log(val, 'val')
}
</script>
<style lang="scss" scoped>
.serchBox {
  display: flex;
  margin-bottom: 30px;
  gap: 30px;
}
.tag {
  width: 60px;
  height: 30px;
  border-radius: 5px;
  text-align: center;
  line-height: 30px;
  margin-right: 10px;
}
.home {
  background-color: lightgreen;
}
.office {
  background-color: rgb(177, 48, 48);
  color: white;
}
</style>
